<template>
<!-- ref/children  引用这个组件要设置滚动的元素的高度 -->
  <div class="wrapper" ref="wrapper">
      <!-- 滚动的必须只有一个元素 -->
      <div>
          <slot></slot>
      </div>
  </div>
</template>

<script >
import BScroll from 'better-scroll'
export default {
    data () {
        return {
            scroll:null
        }
    },
    props: {
        probeType:{ //父组件调用要用probe-type
            type:Number,
            default:0
        },
        pullUpLoad:{
            type:Boolean,
            default:false
        }
    },
    mounted () {
        // 为什么放在这里，原来老师是放在created里面的，但是created里面获取不到元素，组件的还没渲染
        // document.querySelector('.wrapper')不是特别好,这里是获取第一个类的，这里可能别的引用的时候也有这个类，这个类可能不准确
         // 1、创建bscroll对象
        this.scroll=new BScroll(this.$refs.wrapper,{
             click:true, //div元素要在这里设置才可以点击
             observeDOM: true, // 开启 observe-dom 插件
             probeType:this.probeType, //根据传进来的参数是否监听位置信息
             pullUpLoad:this.pullUpLoad//上拉事件
        })
         // 2、监听到某个位置才显示
         if(this.probeType===2||this.probeType===3){
              this.scroll.on("scroll",(postion)=>{
                // console.log(postion);
                this.$emit("scroll",postion) //传给home父组件
                }) 
        }
        
       
        // 3、监听上拉事件，然后刷新
        if(this.pullUpLoad){
            this.scroll.on("pullingUp",()=>{
            // console.log("加载更多");
            this.$emit("pullingUp");
             this.scroll.finishPullUp()
            })
        }
        
    },
    methods: {
       
        scrollTo(x,y,time=500){ //500是如果不传的话设置为默认值
            this.scroll.scrollTo(x,y,time)
        },
        refresh(){
            //因为插件加载的高度的时候，图片未加载，会有高度不准确的问题，图片加载完成之后会变，所有有可能会有下拉到一定高度不能下拉的问题
            console.log("Scorll调用了刷新的方法");
            this.scroll.refresh()
        }
       
    }
}
</script>

<style scoped>

</style>